import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

import sheet from '../styles/sheet';
import { DEFAULT_CENTER_COORDINATE } from '../utils';
import Page from './common/Page';
import Bubble from './common/Bubble';

export default function ShowClick(props) {

    const [latitude, setLatitude] = useState(undefined);
    const [longitude, setLongitude] = useState(undefined);
    const [screenPointX, setScreenPointX] = useState(undefined);
    const [screenPointY, setScreenPointY] = useState(undefined);

    function onPress(event) {
        const { geometry, properties } = event;
        setLatitude(geometry.coordinates[1]);
        setLongitude(geometry.coordinates[0]);
        setScreenPointX(properties.screenPointX);
        setScreenPointY(properties.screenPointY);
    }

    function hasValidLastClick() {
        return (
            typeof latitude === 'number' &&
            typeof longitude === 'number'
        );
    }

    function renderLastClicked() {
        if (!hasValidLastClick) {
            return (
                <Bubble>
                    <Text>Click the map!</Text>
                </Bubble>
            );
        }
        return (
            <Bubble>
                <Text>Latitude: {latitude}</Text>
                <Text>Longitude: {longitude}</Text>
                <Text>Screen Point X: {screenPointX}</Text>
                <Text>Screen Point Y: {screenPointY}</Text>
            </Bubble>
        );
    }

    return (
        <Page {...props}>
            <MapboxGL.MapView style={sheet.matchParent} onPress={onPress}>
                <MapboxGL.Camera centerCoordinate={DEFAULT_CENTER_COORDINATE} />
            </MapboxGL.MapView>
            {renderLastClicked()}
        </Page>
    );
}